<template>
    <div class="titleBar viewport">
        <div class="bar-left" onclick="history.go(-1)">
            <img class="img" src="@/assets/img/icon-back.png" alt="">
        </div>
        <div class="barNavTit">
            <a class="active" href="#proInfo">商品</a>
            <a href="#proComment">评价</a>
            <a href="#proDetails">详情</a>
        </div>
        <div class="bar-right">
            <img class="img moreImg" src="@/assets/img/icon-moreNav.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
  name: 'titleBar',
  data () {
    return {
        
    }
  },
  mounted(){
  },
  components:{
  }
}
</script>
<style scoped>
.titleBar {
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    font-size: .34rem;
    text-align: center;
    background: #FFF;
    border-bottom: #E6E6E6 1px solid;
    z-index: 99;
}
.titleBar .bar-left {
    position: absolute;
    top: 0;
    left: .32rem;
    overflow: hidden;
}
.titleBar .bar-left .img {
    margin-top: .12rem;
    width: .64rem;
    height: .64rem;
    vertical-align: top;
}
.titleBar .barNavTit > a.active {
    font-size: .34rem;
    color: #041A27;
}
.titleBar .barNavTit > a {
    margin: 0 .32rem;
    display: inline-block;
    font-size: .26rem;
    color: #666;
    transition: font-size 0.2s;
}
.titleBar .bar-right {
    position: absolute;
    top: 0;
    right: .32rem;
}
.titleBar .bar-right .img {
    margin-top: .12rem;
    width: .64rem;
    height: .64rem;
    vertical-align: top;
}

</style>
